<html class="responsive" style="font-size: 167px;">
<head>
    <title>实时票房</title>
    <meta name="csrf" content="dcd6ff4cce5668226354df962a2971b133d9b6a3">
    <link rel="stylesheet" href="css/common-b0cc1969.css">
    <link rel="stylesheet" href="css/pages-dashboard-dashboard-5f3f8350.css">
    <link rel="stylesheet" href="./css/font.css">
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
    <script src="./js/vue2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/dateutil.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script type="text/javascript" src="./js/qs.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>



    <script>
        (function () {
            var timer = null;
            function scale() {
                var html = document.documentElement;
                var r = html.clientWidth / 1920;
                html.style.fontSize = Math.ceil(r * 100) + 'px';
                html.classList.add('responsive');
                var s = html.clientWidth / html.clientHeight;
                if (s < 1.5) {
                    html.classList.add('narrow');
                } else {
                    html.classList.remove('narrow');
                }
                timer = null;
            }

            window.onresize = function () {
                if (timer) clearTimeout(timer);
                timer = setTimeout(scale, 100);
            }
            scale();
        })();
    </script>

</head>
<body>


<div id="app">
    <div class="dashboard-page" >
        <div class="dashboard">
            <div class="dashboard-title">
                <div class="dashboard-title-clock">
                    <span class="sprite sprite-logo"></span>
                    <span class="current-date">{{curdate}}</span>
                    <div class="clock">
                        <div class=""><span>北京时间 {{curtime}}</span></div>
                    </div>
                </div>

            </div>
            <div class="dashboard-content">
                <div class="dashboard-list dashboard-left bg">
                    <div class="dashboard-table-header">
                        <div class="table-header">电影票房</div>
                    </div>
                    <table class="dashboard-table table-header">
                        <thead>
                        <tr>
                            <th class="moviename-th">
                                <div>影片</div>
                            </th>
                            <th>
                                <div class="theader box-title">今日票房</div>
                            </th>
                            <th>
                                <div class="theader">票房占比</div>
                            </th>
                            <th>
                                <div class="theader last-col">排片场次</div>
                            </th>
                        </tr>
                        </thead>
                    </table>
                    <div class="movielist-container">
                        <div class="movielist">
                            <table class="dashboard-table">
                                <tbody>
                                <tr v-for="(box,index) in boxofficeList">
                                    <td class="moviename-td" >
                                        <div class="movie-desc">
                                            <div class="moviename-num"><p class="moviename-index">{{index}}</p></div>
                                            <div class="moviename-desc"><p class="moviename-name">{{box.movieName}}</p>
                                                <p class="moviename-info">
                                                    <span>上映{{box.onlineDays}}天</span>&nbsp;&nbsp;<span>{{box.boxOffice}}亿</span></p></div>
                                        </div>
                                    </td>

                                    <td class="realtime mtsi-num">{{box.generalBoxOffice}}万</td>
                                    <td>{{box.boxRatio}}%</td>
                                    <td class="last-col">{{box.playTimes}}</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>


<script>


    let vm = new Vue({
        el:"#app",//绑定，告知vue负责管理页面的哪个部分
        data:{
            curdate:'',
            curtime:'',
            boxofficeList:[]
        },
        methods:{
            //每个5秒钟向后台发一个请求，刷新一下页面数据
            // url:/cinema/cinema/dashboard/web/list'

        },

        created(){
            //定义一个周期性运行的函数,没个1秒钟刷新一下面上的日期，时间

            //setInterval 是执行一个周期性的函数，有两个参数，
            // 第一个是要被执行的函数，第二个是间隔时间（毫秒）


        }
    })
</script>

</html>
